<template>
<div class="content">
    <mt-header fixed title="校正站点">
              <div slot="left">
    <mt-button icon="back" @click.native="goback()">返回</mt-button>
              </div>
    </mt-header>
    <mt-field label="建筑名称"  v-model="name"></mt-field>
    <mt-field label="详细地址"  v-model="address"></mt-field>
    <mt-field label="高度"  v-model="levation" class="levation"></mt-field>
    <div class="cell">
      <div class="cell-left">
        <p><span>经度</span>{{longitude}}</p>
        <p><span>纬度</span>{{latitude}}</p>
      </div>
      <div class="cell-right">
            <div class="map">
    <baidu-map
    class="map"
     ak="bfjh6ty1qqGNxSfCYUEeIquWm1z2D6LW"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    :continuous-zoom="true"
    :pinch-to-zoom="true"
    >
    <bm-geolocation
    anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
    :showAddressBar="true"
    :autoLocation="true"
    @locationSuccess="locationSuccess"
    @locationError="locationError"
    ref="geolocation"></bm-geolocation>
   </baidu-map>
   </div>
        <!-- <div @click="correctLongLat">校正经纬度</div> -->
      </div>
    </div>
    <div class="phone">
        <span class="left" >建筑屋照片</span>
        <label class="right" for="image"><input type="file" id='image' accept="image/*" capture='camera' class="file" @change="change"></label>
    </div>
    <div class="image">
        <img :src="imgsrc"/>
    </div>
    <div @click="submit" class="clickBttom"> 提交</div>
    </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmGeolocation } from 'vue-baidu-map'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      name: '',
      address: '',
      imgsrc: '',
      longitude: '',
      latitude: '',
      levation: '',
      zoom: 15,
      center: {lng: 113.9410499639, lat: 22.5461508801}
    }
  },
  created () {
    this.name = this.$route.query.name
    this.address = this.$route.query.address
    this.imgsrc = this.$route.query.imgsrc
    this.levation = this.$route.query.levation
    this.longitude = this.$route.query.long
    this.latitude = this.$route.query.lat
  },
  computed: {
    siteid () {
      return this.$store.state.user.sitelist[0].siteid
    }
  },
  components: {
    BaiduMap,
    BmGeolocation
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    change (el) {
      let file = el.target.files[0]
      this.upload(file)
    },
    async upload (file) {
      let param = new FormData() // 创建form对象
      param.append('file', file, file.name)// 通过append向form对象添加数据
      let config = {headers: {'Content-Type': 'multipart/form-data'}}
      const res = await this.$store.dispatch('upload', param, config)
      if (res.status === '0') {
        this.imgsrc = res.context
      }
    },
    // 点击确认按钮
    async submit () {
      if (!this.name) {
        Toast('建筑屋名称不能为空!')
        return
      }
      if (!this.address) {
        Toast('地址不能为空!')
        return
      }
      if (!this.levation) {
        Toast('高度不能为空!')
        return
      }
      const param = {
        siteid: this.siteid,
        buildid: this.$route.query.buildid,
        buildname: this.name,
        address: this.address,
        longitude: this.longitude,
        latitude: this.latitude,
        levation: this.levation,
        buildimageurl: this.imgsrc
      }
      const res = await this.$store.dispatch('sitefix', param)
      if (res.status === '0') {
        Toast(res.tips)
      }
    },
    locationSuccess (point, AddressComponent, marker) {
      this.latitude = point.point.lat
      this.longitude = point.point.lng
    },
    locationError (StatusCode) {
      Toast('定位失败，请稍后重试！')
    }
  }
}
</script>
<style lang="less" scoped>
.map{
  height: 50px;
  width: 50px;
  & /deep/.anchorBR{
    position: absolute;
    right: 7px !important ;
    bottom: 7px !important ;
  }
}
.levation{
   border-bottom: 1px solid #eee;
 }
.cell{
 position: relative;
 padding: 0 10px;
 &-left{
   width: 270px;
 }
 p{
   height: 48px;
   line-height: 48px;
   font-size: 16px;
   border-bottom: 1px solid #eee;
 }
 span{
   display: inline-block;
   width: 105px;
 }

 &-right{
    position: absolute;
     right: 10px;
     top: 50%;
     transform: translate(0,-50%);
   div{
     width: 50px;
     height: 50px;
     line-height: 30px;
     border-radius: 12px;
     text-align: center;
     font-size: 13px;
     background: #26a2ff;
     color: #fff;

   }
}
}
.content{
    padding-top: 40px;
}
.phone{
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    border-top: 1px solid #eee;
    span{
        font-size: 16px
    }
    .right{
        float: right;
        height: 100%;
        width: 32px;
        background: url('~@/assets/image/camera.svg') no-repeat center /32px 32px;
        // input{

        // }
    }
    .left{
        float: left;
    }
    .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    font-size: 0px;
    // border: 1px solid #99D3F5;
    // border-radius: 4px;
    // padding: 4px 12px;
    overflow: hidden;
    // color: #1E88C7;
    // text-decoration: none;
    text-indent: 0;
    // line-height: 20px;
    z-index: -10;
    }
    .file input {
    position: absolute;
    font-size: 0px;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    opacity: 0;
    }
    .file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
    }
}
.image{
padding: 0 10px;
img{
    width: 100%;
}
}
.clickBttom{
   width: 300px;
   height: 50px;
   margin: 30px auto;
   line-height: 50px;
   background: #26a2ff;
   border-radius: 12px;
   color: #fff;
   text-align: center;
   font-size: 16px;
}

</style>
